<head>
    <meta charset = "utf-8">
</head>
<body>
    <iframe id='HtmlEdit' style="width:400px; height: 300px" marginWidth='2px' marginHeight='2px'></iframe>
    <div id="butGroup">
        <button id="bold">加粗</button>
        <button id="copy">复制</button>
        <button id="big">变大</button>
        <button id="italic">斜体</button>
        <button id="underline">下划线</button>
        <button id="hiliteColor">背景色</button>
        <button id="save">上传</button>
    </div>
    <div id="box" style="height: 300px;width: 400px; border: 1px solid black">
    </div>
</body>
<script>
    const editor = document.getElementById("HtmlEdit").contentWindow;//获取iframe Window 对象
    const doc = document.getElementById("HtmlEdit").contentDocument; //获取iframe documen 对象
    const butGroup = document.getElementById('butGroup');
    const box= document.getElementById('box');
     //只需键入以下设定，iframe立刻变成编辑器。
    editor.document.designMode = 'On';  //打开设计模式
    editor.document.contentEditable = true;// 设置元素为可编辑
    //设置事件监听
    butGroup.onclick = function (evt){
        let e = evt || window.event
        let targetId = e.target.id
        //获取点击的标签的id
        switch (targetId){
            case 'bold': addBold(); break;
            case 'big': big(); break;
            case 'copy': copy(); break;
            case 'italic':italic( ) ; break;
            case 'hiliteColor': hiliteColor(); break;
            case 'underline': underline() ;break;
            case 'save': save( ) ; break;
        }
    }
    function big(){
        editor.document.execCommand ("fontSize", true, 5);
    }
    function copy(){
        editor.document.execCommand ("copy", true,null);
    }
    function addBold(){
        editor.document.execCommand("Bold", true, null);
    }
    function italic(){
        editor.document.execCommand( "italic", true,null)
    }
    var hiliteColor = () => {editor.document.execCommand( 'hiliteColor', true, 'green') }
    var underline= ()=>{ editor.document.execCommand('underline',true,null)}
    function save(){
            box.innerHTML=doc.body.innerHTML;
    }
</script>